<template>
  <div class="content">
    <Form>
      <FormItem label="规则列表" prop="default">
        <Radio :datas="param" v-model="type" @change="change"></Radio>
      </FormItem>
      <FormItem label="验证规则" prop="default">
        <input type="text" v-model="value.pattern" :readonly="readonly">
      </FormItem>
      <FormItem label="验证提示" prop="default">
        <input type="text" v-model="value.message">
      </FormItem>
    </Form>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    value: [Array, Object]
  },
  data() {
    return {
      readonly: false,
      type: 'custom',
      param: [
        { title: '邮箱', key: '/^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$/;' },
        { title: '手机', key: '/^1[3456789]\\d{9}$/;' },
        { title: '身份证', key: '/^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$/' },
        { title: '英文字母', key: '/^[a-zA-Z]+$/' },
        { title: '中文文字', key: '/^[\\u0391-\\uFFE5]+$/' },
        { title: '自定义', key: 'custom' }
      ],
      field: {}
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {
    verify: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  async mounted() {

  },
  methods: {
    change(data) {
      if (data.key == 'custom') {
        this.readonly = false;
        this.value.pattern = '';
      } else {
        this.readonly = true;
        this.value.pattern = data.key;
      }
    },
    affirm(e) {
      let { handleCancel } = e;
      handleCancel();
    }
  }
};

</script>
<style lang="less" scoped="true">
</style>
